<template>
  <div v-if="GLOBAL.sysUserVisible=='1'">
    <el-container>
      <span >学校概况 >></span>
      <span style="color: #20a0ff"> &nbsp&nbsp{{this.universityName}}&nbsp&nbsp&nbsp&nbsp</span>
      <el-main>
        <el-row gutter="20">
          <el-col :span="3" offset="16">
            <el-select  v-model="collegeId" size="small" filterable clearable placeholder="请选择学院" clearable>
              <el-option
                v-for="item in this.cOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-col>
          <el-col :span="3" >
            <el-select v-model="sType" size="small" filterable clearable placeholder="学生类型" clearable>
              <el-option
                v-for="item in this.sList"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-col>
          <el-col :span="2"  >
            <el-button type="primary" size="mini" @click="initData">搜索</el-button>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <el-container>
      <el-main >
        <el-col :span="6" v-for="(value, key) in basicData"  :offset="0" >
          <el-card class="box-card" @click.native="showmore(key)">
            <div style="margin-left:1px;font-size: 22px;height: 40px; "></div>
            <div style="margin-left:1px;font-size: 22px;height: 40px; ">{{basicName[key]}}</div>
            <div style="margin-left:1px;font-size: 18px;height: 40px; margin-bottom:20px;">{{value }}</div>
          </el-card>
        </el-col>
      </el-main>
    </el-container>
    <el-container>
      <el-main>
      <el-card >
        <div id="line1">
          <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
          <div id="main1" style="float:left;width:100%;height: 300px"></div>
        </div>
      </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
    export default {
        name: "evaluationCount",
        data() {
            return {
                universityName: "",
                basicData: {},
                basicName:{"personNum":"注册用户数（小程序）","evaNum":"评测人次","evaAvg":"人均评测次数","seriousNum":"预警人数"},
                trendData:[],
                dateTime:[],
                cOptions:[],
                sType:"",//学生类别
                collegeId:"",//学院id
                sList:[{
                    label:'初中',
                    value: 3
                }, {
                    label:'高中',
                    value: 4
                },{
                    label:'大专',
                    value: 5
                }, {
                    label:'本科',
                    value: 0
                },{
                    label:'硕士',
                    value: 1
                }, {
                    label:'博士',
                    value: 2
                }],
            }
        },
        watch:{
            trendData() {
                this.$nextTick(() => {
                    //此时就可以获取到在created赋值后的dataList了
                    this.initLineEcharts();

                })
            },
        },
        created() {
            this.getDate();
            this.initialData()
            this.initData();
        },
        methods: {
            showmore(key){
              if(key=="personNum"){
                  this.$router.push({path:"/home/registerUser"});
              }
              if(key=="seriousNum"){
                  this.$router.push({path:"/home/seriousStu"});

              }
            },
            getDate(){
                var dataArr = [];
                var data = new Date();
                var year = data.getFullYear();
                data.setMonth(data.getMonth()+1, 1)           //获取到当前月份,设置月份
                for (var i = 0; i < 6; i++) {
                    data.setMonth(data.getMonth() - 1);     //每次循环一次 月份值减1
                    var m = data.getMonth() + 1;
                    m = m < 10 ? "0" + m : m;
                    dataArr.push(data.getFullYear() + "-" + (m));
                }
                this.dateTime=dataArr.reverse()
                console.log("时间:"+dataArr)
            },
            initialData(){
                this.$axios.post("managementSystem/user/personalInfo")
                    .then(data => {
                        if (data.status != 200) {
                            this.$message.error('服务出错' + data.status);
                        } else {
                            if (data.data.errorCode == '200') {
                                this.universityName = data.data.data["university"]
                            }
                        }
                    });
                this.$axios.post("managementSystem/college/find",{"collegeName":null,"collegeStatus":null,"filterDates":["",""],"pageNum":1,"pageSize":20,"universityName":null})
                    .then(data => {
                        if (data.status != 200) {
                            this.$message.error('服务出错' + data.status);
                        } else {
                            if (data.data.errorCode == '200') {
                                var u = data.data.collegeManagementTable
                                console.log(u)
                                for (var i in u) {
                                    this.cOptions.push({"label":u[i]["collegeName"],"value":u[i]["id"]})
                                }
                            }
                        }
                    })
            },
            initData() {
                //评测数据要分学院和学生类别的维度
                //sType:学生类别  【"" 所有都有   0 本科 1硕士 2博士 3初中 4高中 5大专】
                //collegeId：【""所有学院都有   否则是对应学院的id】
                this.$axios.post("managementSystem/report/evaluation",{"sType":this.sType,"collegeId":this.collegeId})
                    .then(data => {
                        if (data.status != 200) {
                            this.$message.error('服务出错' + data.status);
                        } else {
                            if (data.data.errorCode == '200') {
                                //后面替换为其他接口
                                // this.basicData = {"personNum": 120, "evaNum": 400, "seriousNum": 8}
                                this.basicData={"personNum":data.data.personNum , "evaNum": data.data.evaNum, "seriousNum": data.data.seriousNum}
                                if(this.basicData["evaNum"]==0||this.basicData["personNum"]==0){
                                    this.basicData["evaAvg"]=0+"次/人"
                                }else {
                                    this.basicData["evaAvg"] = (this.basicData["evaNum"] / this.basicData["personNum"]).toFixed(0) + "次/人"
                                }
                                this.basicData["personNum"] = this.basicData["personNum"] + "人"
                                this.basicData["evaNum"] = this.basicData["evaNum"] + "人次"
                                this.basicData["seriousNum"] = this.basicData["seriousNum"] + "人"

                                // this.trendData = [20, 30, 10, 5, 15, 20]
                                this.trendData=data.data.trendDate
                            }
                        }
                    })
            },
            initLineEcharts(){
                // 实例化echarts对象
                let myChartDrawer = this.$echarts.init(document.getElementById('main1'))

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '评测使用趋势图',
                        x:'center',//x轴方向对齐方式
                    },
                    tooltip: {              //设置tip提示
                        trigger: 'axis'
                    },

                    legend: {               //设置区分（哪条线属于什么）
                        data:['评测次数'],
                        x:'right',//x轴方向对齐方式
                        padding:[10,70,0,0]
                    },
                    color: ['#8AE09F'],       //设置区分（每条线是什么颜色，和 legend 一一对应）
                    xAxis: {                //设置x轴
                        type: 'category',
                        boundaryGap: false,     //坐标轴两边不留白
                        data: this.dateTime,
                        name: 'DATE',           //X轴 name
                        nameTextStyle: {        //坐标轴名称的文字样式
                            fontSize: 16,
                            padding: [0, 0, 0, 20]
                        },
                        axisLine: {             //坐标轴轴线相关设置。
                            lineStyle: {
                                //color: '#FA6F53',
                            }
                        }
                    },
                    yAxis: {
                        name: 'Num',
                        nameTextStyle: {
                            fontSize: 16,
                            padding: [0, 0, 10, 0]
                        },
                        axisLine: {
                            lineStyle: {
                                //color: '#FA6F53',
                            }
                        },
                        type: 'value'
                    },
                    series: [
                        {
                            name: '评测次数',
                            data:  this.trendData,
                            type: 'line',               // 类型为折线图
                            lineStyle: {                // 线条样式 => 必须使用normal属性
                                normal: {
                                    color: '#8AE09F',
                                }
                            },
                        },
                    ]
                };

                myChartDrawer.setOption(option);
            },
        }
    }
</script>

<style scoped>
  .el-main {
    color: #333;
    /* text-align: center; */
    line-height: 20px !important;
  }
</style>
